<template>
    <div>
        <!-- header -->
        <header>
            <div class="countScore">{{scoreList.countScore}}</div>
            <van-rate
                v-model="scoreList.countScore"
                allow-half
                void-icon="star"
                void-color="#eee"
                readonly
            />
            <div class="score">
                <small>味道</small>
                <span>{{scoreList.score[0]}}</span>
            </div>
            <div class="score">
                <small>包装</small>
                <span>{{scoreList.score[1]}}</span>
            </div>
            <div class="score">
                <small>配送</small>
                <span>{{scoreList.score[2]}}</span>
            </div>
        </header>
        <!-- commit -->
        <commitxt></commitxt>
    </div>
</template>

<script>
import commitxt from './commitxt'
export default {
    props: ['scoreList'],
    data() {
        return {
            value: 2.5
        }
    },
    components: {
        commitxt
    }
}
</script>

<style lang="less" scoped>
    header {
        display: flex;
        justify-content: space-around;
        padding: 5.333333vw 6.4vw;
        color: #666;
        border-bottom: 1vh solid #f5f5f5;
        .countScore {
            font-size: 5vh;
            color: #ff6000;
        }
        .van-rate {
            display: flex;
            align-items: center;
            transform: scale(0.7);
            margin-left: -10px;
            margin-right: -10px;
        }
        .score {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            span {
                font-size: 3vh;
            }
        }
    }
</style>
